<!-- 
Vue 3 中的内置组件主要包括以下几种，下面是对它们的补充说明和总结：
  1. Teleport:
    - Teleport 组件允许你将子组件渲染到 DOM 的不同位置，而不是其父组件的结构中。这对于模态框、通知等需要在特定位置显示的组件非常有用。
    - 使用方式非常简单，只需将要传送的内容放在  `<teleport>`  标签内，并指定目标位置。
  2. Suspense:
    - Suspense 组件用于处理异步组件的加载状态。它允许你在组件加载时显示一个后备内容（例如加载指示器），直到异步组件准备好渲染。
    - 你可以使用  `v-slot`  来定义加载状态和错误状态的内容。
  3. KeepAlive:
    - KeepAlive 组件用于缓存不活跃的组件实例，避免重复渲染，提高性能。它通常与动态组件一起使用。
    - 通过  `include`  和  `exclude`  属性，你可以控制哪些组件应该被缓存。
  4. v-model:
    - 在 Vue 3 中， `v-model`  的使用变得更加灵活。可以在组件上使用多个  `v-model` ，并支持自定义  `modelValue`  和  `update:modelValue`  事件。
    - 这使得在自定义组件中处理双向绑定更加简单和直观。
  5. Fragment:
    - Vue 3 支持 Fragment，允许组件返回多个根节点，而不需要包裹在一个单一的父元素中。这使得组件的结构更加灵活，减少了不必要的 DOM 层级。

  总结：
  Vue 3 的内置组件提供了更强大的功能和灵活性，能够更好地处理异步加载、组件缓存、DOM 结构等常见开发场景。通过合理使用这些组件，可以提高应用的性能和用户体验。 
  -->
<template>
  <div class="app">
    <h3>1. teleport组件-远距离传送</h3>
    <div class="parent">
      <div class="children">
        <p class="content">
          <!-- teleport: 远距离传送, 到#teleport元素内 -->
          <teleport to="#teleport">
            <TeleportCpns></TeleportCpns>
          </teleport>
        </p>
      </div>
    </div>

    <h3>2. suspense组件-用于处理异步组件的加载状态</h3>
    <suspense>
      <template #default>
        <async-home></async-home>
      </template>
      <template #fallback>
        <h3>加载中...</h3>
      </template>
    </suspense>
  </div>
</template>

<script setup>
  import { ref, defineAsyncComponent } from 'vue'
  import TeleportCpns from './components/TeleportCpns.vue'
  
  const AsyncHome = defineAsyncComponent(() => import('./components/AsyncHome.vue'))

</script>

<style lang="scss" scoped></style>
